<script setup lang="ts">
import {defineProps} from 'vue'

import router from "@/router";
import {PhoneFilled} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getPhoneNum} from "@/api/home/index";

let visible = ref(false)

// 打开遮罩
function customer() {
    visible.value = true;
}

// 关闭遮罩
function onClose() {
    visible.value = false;
}

// 弹出电话
let phoneArr = ref('')
let phone = ref('')
getPhoneNum().then(res => {
    console.log(res)
    if (res.code == 200) {
        phoneArr.value = res.data
        phone.value = phoneArr.value[0].dictValue
    }
})

function isPhone() {
    window.location.href = `tel:${phone.value}`;
}


</script>

<template>
  <!--个人中心的内容-->
    <div class="boxx">
        <!--      我的预约、我的咨询、测评记录-->
            <div class="recording">
                <div class="booking itSMineBox" @click="router.push({path: '/bookingC'})">
                <div class="imgBox">
                    <img src="@/assets/images/我的预约_logo.png" alt="" class="imgT">
                </div>
                <div class="text">
                    我的预约
                </div>
            </div>
            <div class="consultation itSMineBox" @click="router.push({path: '/consultation'})">
                <div class="imgBox">
                    <img src="@/assets/images/我的咨询_logo.png" alt="" class="imgT">
                </div>
                <div class="text">
                    我的咨询
                </div>
            </div>
            <div class="evaluation itSMineBox" @click=" router.push('/record')">
                <div class="imgBox">
                    <img src="@/assets/images/测评记录.png" alt="" class="imgT">
                </div>
                <div class="text">
                    测评记录
                </div>
            </div>
        </div>
        <!--      我的消息、我的收藏、我的客服、设置-->
        <div class="information">
            <div class="message isBox" @click=" router.push('/personalMessage')">
                <div class="imgBox">
                    <img src="@/assets/images/消息.png" alt="" class="imgI">
                </div>
                <div class="text">
                    我的消息
                </div>
            </div>
            <div class="collection isBox" @click=" router.push('/collection')">
                <div class="imgBox">
                    <img src="@/assets/images/收藏%20(1).png" alt="" class="imgI">
                </div>
                <div class="text">
                    我的收藏
                </div>
            </div>
            <div class="customer isBox" @click="customer">
                <div class="imgBox">
                    <img src="@/assets/images/客服.png" alt="" class="imgI">
                </div>
                <div class="text">
                    我的客服
                </div>
                <a-drawer
                        placement="bottom"
                        :closable="false"
                        :height="0+'%'"
                        :width="50+'%'"
                        :visible="visible"
                        @close="onClose"
                        :maskStyle="{
                 'animation':'none',
                 'height': '90%',
                 }"
                >
                    <p>Some contents...</p>
                    <el-button class="phone" @click="isPhone">
                        <el-icon color="#1590FB">
                            <PhoneFilled/>
                        </el-icon>&nbsp;{{ phone }}
                    </el-button>
                    <button class="cancel" @click="onClose">取消</button>
                </a-drawer>
            </div>
            <div class="setUp isBox" @click="router.push({path: '/setUp'})">
                <div class="imgBox">
                    <img src="@/assets/images/设置.png" alt="" class="imgI">
                </div>
                <div class="text">
                    设置
                </div>
            </div>
        </div>
    </div>
    <slot></slot>

</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.boxx {
    margin: 5% auto;
    padding-top: 5%;
    width: 98%;
    height: 70%;
    min-height: 140vw;
    background-color: #F2F9FF;
    border-radius: 15px;
    box-sizing: border-box;
}
.recording {
    margin: auto;
    padding: 3% 5%;
    display: flex;
    justify-content: space-between;
    width: 92%;
    background-color: #fff;
    border-radius: 15px;
    .itSMineBox {
        width: 22%;
        height: 40%;
        .imgBox {
            width: 100%;
            height: 100%;
            .imgT {
                margin-left: 10%;
                width: 75%;
                height: 12vw;
                border-radius: 50%;
                vertical-align: center;
            }
        }
        .text {
            margin-top: 15%;
        }
    }
}
.information {
    margin: 5% auto;
    padding: 0 5%;
    padding-top: 5%;
    width: 92%;
    min-height: 100vw;
    background-color: #fff;
    border-radius: 15px;
    .isBox {
        display: flex;
        align-items: center;
        padding: 5% 0;
        width: 100%;
        height: 100%;
        min-height: 10vw;
        text-align: center;
        border-bottom: 1px solid rgba(215, 219, 222, 0.2);
        .imgBox {
            margin-top: -1%;
            width: 10%;
            .imgI {
                width: 100%;
                vertical-align: top;
            }
        }
        .text {
            margin-left: 2%;
            height: 90%;
            text-align: center;
        }
    }
}

.cancel {
    position: absolute;
    bottom: 23vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

.phone {
    position: absolute;
    bottom: 38vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

</style>